<template>
  <div>
    <el-form :inline="true" v-if="showButton">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addColumn">增加</el-button>
        <el-button type="primary" icon="el-icon-delete" size="mini" @click="removeColumn">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      @cell-click="cellClick"
      highlight-current-row
      style="width: 100%">
      <el-table-column
        v-for="column  in columnList"
        :key="column.id"
        :label="column.name"
        align="center"
        show-overflow-tooltip>
        <template slot="header" slot-scope="scope">
          {{column.name}}
          <span class="drawing-item-delete" style="float:right;cursor: pointer;" @click="removeColumn(column)">
            <i class="el-icon-close"/>
          </span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

  import Sortable from 'sortablejs'

  export default {
    name: 'index',
    props: {
      //  字段列表
      columnList: { type: Array },
      showButton: { 
        type:Boolean,
        default:true  }
    },
    data() {
      return {
        tableData: [],
        dropCol: this.columnList
      }
    },
    mounted() {
      this.columnDrop()
    },
    methods: {
      // 获取 项目 - 需求 - 列表
      addColumn(mid) {

      },
      removeColumn(col) {
        this.columnList.pop(col)
      },
      cellClick() {
      },
      //列拖拽
      columnDrop() {
        const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
        console.log('wrapperTr', wrapperTr)
        this.sortable = Sortable.create(wrapperTr, {
          animation: 180,
          delay: 0,
          onEnd: evt => {
            const oldItem = this.dropCol[evt.oldIndex]
            this.dropCol.splice(evt.oldIndex, 1)
            this.dropCol.splice(evt.newIndex, 0, oldItem)
          }
        })
      }

    },
    computed: {}
  }
</script>

<style scoped>
  .flip-list-move {
    transition: transform 0.5s;
  }

  .no-move {
    transition: transform 0s;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .list-group {
    min-height: 20px;
  }

  .list-group-item {
    cursor: move;
  }

  .list-group-item i {
    cursor: pointer;
  }
</style>
